<template>
  <div class="stuManaga">
    <div class='box'>
      <AddStudent @getStudents='getStudents' />
      <UpdateStudent 
        @getStudents='getStudents' 
        :transStudentData='transStudentData'/>  
    </div>
    <SearchStudent 
      @getStudents='getStudents' 
      @transSearchStudents='transSearchStudents'/>
    <StuList 
      @getStudents='getStudents' 
      @transStudent='transStudent' 
      :studentData='studentData'/>
  </div>
</template>

<script>
import axios from 'axios';
import StuList from './StuList.vue';
import AddStudent from './AddStudent.vue';
import SearchStudent from './SearchStudent.vue';
import UpdateStudent from './UpdateStudent.vue';

export default {
  components: {  
    StuList,
    AddStudent,
    SearchStudent,
    UpdateStudent
  },
  data(){
    return{
      studentData:{
        currentPage:2,
        pageSize:5,
        totalPage:0,
        totalStudent:0,
        students:[]
      },
      //传递修改学生的值
      transStudentData:{},
      //搜索学生的值
      searchData:{
        searchType:'name',
        searchValue:''
      }
    }
  },
  methods:{
    //新增，修改，学生列表组件都要用！
    async getStudents(){
      var {data} = await axios({
        url:'/students/getStudents',
        method:'get',
        params:{
          ...this.studentData,
          ...this.searchData,
          students:[]
        }
      });
      if(data.status){
        console.log({...this.searchData});
        //不想重设this.studentData数据
        this.studentData = {
          ...this.studentData,
          ...data.data,
        }
        console.log(this.studentData.students)
      }else{
        alert(data.message);
      }
    },
    //传递修改学生信息-修改组件要用
    transStudent(value){
      this.transStudentData = value;
    },
    //传递修改学生信息-搜索组件要用
    transSearchStudents(value){
      this.searchData = {...value};
      console.log(this.searchData);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div.box{
  display: flex;
}
</style>
